<template>
	<view>
		<view class="search">
			<view class="flex-y-center box">
				<image src="@/static/img/sousuo.png" class="icon"></image>
				<input placeholder="请输入搜索内容" v-model="kwd" class="flex-grow-1 ipt" />
				<button class="btn" @click="kwdSearch">搜索</button>
			</view>
		</view>
		<view scroll-x="true" class="area flex-y-center">
			<view class="title flex-grow-0" :class="index == tabIndex ? 'active':''" v-for="(item,index) in tabList" :key="index"
				@tap="chageTab(index)">{{item.name}}</view>
		</view>
		<view class="store-list">
			<view class="store-item" v-for="(item,index) in data.data_list" :key="index" @click="storeTap(item.activity_id)">
				<view class="head-item border-bottom info-item">
					<view class="item-left">
						<view class="region-name" :class="[item.platform=='meituan'?'meituan':'elem']">{{item.street}}</view>
						<image class="head-img" :src="item.image"></image>
					</view>
					<view class="item-right">
						<view class="item">
							<view class="title">{{item.name}}</view>
						</view>
						<view class="item">
							<image class="icon" src="@/static/img/elm-logo-ico.png" v-if="item.platform=='eleme'">
							</image>
							<image class="icon" src="@/static/img/mt-logo-ico.png" v-if="item.platform=='meituan'">
							</image>
						</view>
					</view>
				</view>
			</view>
			
			<view style="text-align:center;margin-top:120rpx" v-if="data.no_list">
				<view style="color:#444">暂无数据</view>
			</view>
			<view class="flex-y-center flex-x-center"
				style="text-align: center;height: 74rpx;color: #888;font-size: 9pt" v-if="!data.no_list&&data.no_more">
				没有更多了~</view>
			<view style="text-align: center;height: 174rpx;color: #888;font-size: 9pt"
				class="flex-y-center flex-x-center" v-if="!data.no_list&&!data.no_more">
				加载中...
			</view>
			
		</view>
	</view>
</template>

<script>
	import {
		getCityList,
		getActivityList,
	} from '../../apirequest/api.js';
	export default {
		data() {
			return {
				tabIndex: 0,
				lock: 0,
				kwd:'',
				tabList: [],
				data: {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				},

			}
		},
		/**
		 * 页面上拉触底事件的处理函数
		 */
		onReachBottom: function(t) {
			var o = this;
			o.loadDataList(function() {
				o.data.loading_more = !0;
			});
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			//获取数据
			loadData: function() {
				let region_id = uni.getStorageSync('region_id');
				getCityList({region_id:region_id||0}).then((res) => {
					if (res.code == 1) {
						this.tabList = res.data.tabList;
						this.region_id = res.data.tabList[this.tabIndex].id || 0;
						this.loadDataList();
					}
				}).catch(err => {
					console.log(err)
				})
			
			},
			
			//获取数据列表
			loadDataList: function(f) {
				var o = this;
				if (o.lock) {
					return;
				}
				if (o.data.no_list || o.data.no_more) "function" == typeof t && f();
				else {
					var page = (o.data.current_page || 0) + 1;
					var data = {
						page: page,
						keyword:o.kwd,
						region_id: o.region_id
					}
					o.lock = 1;
					console.log(o.lock)
					getActivityList(data).then((t) => {
						if (t.code == 1) {
							if (1 == t.data.current_page && !t.data.data.length) {
								o.data.no_list = !0;
								o.data.loading_more = !1
							}
							if (t.data.data && t.data.data.length) {
								o.data.data_list = o.data.data_list || [];
								o.data.data_list = o.data.data_list.concat(t.data.data),
								o.data.current_page = page;
							}
							if (!t.data.has_more) {
								o.data.no_more = !0;
							}
						
						} else {
							uni.showToast({
								title: '网络繁忙',
								icon: 'error'
							})
						}
						o.lock = 0;
					});
				}
			},
			kwdSearch() {
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				};
				this.loadDataList();
			},
			chageTab(index) {
				this.tabIndex = index;
				this.data = {
					data_list: [],
					no_list: !1,
					no_more: !1,
					current_page: 0,
					loading_more: !0,
				};
				this.region_id = this.tabList[index].id || 0;
				this.loadDataList();
			},
			storeTap(id){
				uni.navigateTo({
					url:'/pages/storeDetails/storeDetails?id='+id
				})
			},
		}
	}
</script>

<style>
	.search {
		background: #4fbeff;
			padding: 20upx 25rpx;
	}

	.search  .box {
	
		border: 1px solid #4fbeff;
		border-radius: 40upx;
		padding: 10upx;
		background: #fff;
	}
	.search .box .ipt{
		margin-left: 10rpx;
		font-size: 30rpx;
	}
	.search .box .icon {
		width: 40upx;
		height: 40upx;
	}
	.search .box .btn{
		background: #4fbeff;
		padding: 0 30rpx;
		font-size: 26rpx;
		border-radius: 40rpx;
			color: #fff;
	}
	/* 主题色 */
	.meituan {
		color: #fff !important;
		background-color: #4fbeff
	}

	.elem {
		color: #fff !important;
		background-color: #00a9e9
	}

	.amount {
		color: #f96456;
		font-weight: 700;
		margin: 0 2px
	}

	.store-list {
		display: flex;
		flex-flow: column
	}

	.store-list .store-item {
		border-radius: 9px;
		background-color: #fff;
		margin: 0 14px 9px 14px;
		padding: 9px 12px;
		position: relative;
		overflow: hidden
	}

	.store-list .store-item .head-item {
		display: flex;
		padding: 4px 0
	}

	.store-list .store-item .info-item {
		padding-top: 0
	}

	.store-list .store-item .info-item .item-left {
		position: relative
	}

	.store-list .store-item .info-item .item-left .region-name {
		position: absolute;
		top: -2px;
		right: -1px;
		color: #fff;
		font-size: 24rpx;
		border-radius: 15px 0 0 15px;
		width: 120rpx;
		height: 15px;
		text-align: center;
		z-index: 99;
	}

	.store-list .store-item .info-item .item-left .head-img {
		width: 76px;
		height: 57px;
		display: block;
		border-radius: 9px
	}

	.store-list .store-item .info-item .item-right {
		margin-left: 9px;
		width: 100%;
		display: flex;
		flex-flow: column;
		line-height: 45rpx;
	}

	.store-list .store-item .info-item .item-right .item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: 24rpx
	}

	.store-list .store-item .info-item .item-right .item .title {
		color: #333;
		font-size: 32rpx;
		font-weight: 700;
	}

	.store-list .store-item .info-item .item-right .item .icon {
		width: 22px;
		height: 22px;
		margin-top: 25rpx;
	}

	.area {
		background-color: #fff;
		margin: 9px 14px;
		font-size: 24rpx;
		border-radius: 9px;
		padding: 12px 12px;
		font-size: 28rpx;
		word-wrap:break-word;
		/* overflow:hidden; */
		overflow-y: scroll;
	}

	.area .title {
		border-radius: 40rpx;
		border: 1px solid #333;
		color: #333;
		padding: 3px 13px;
		margin-right: 10px;
	}

	.area .active {
		background: #4fbeff;
		color: #fff;
		border: 1px solid #4fbeff;

	}
</style>
